<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="公告名称">
      <el-input v-model="form.bulletin_name" />
    </el-form-item>
    <el-form-item label="公告内容">
      <el-input v-model="form.bulletin_content" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.stop="onSubmit">确定</el-button>
      <el-button @click.stop="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watchEffect, shallowRef } from 'vue';
import { useUserStore } from '../../store/user.js'
import { AddBulletin} from '../../api/event.js';
import getDetailedDateTime from '../../untils/time.js'
import showMessage from '../../untils/elMessage.js';


// 可以绑定多个事件,但是必须只有一个emits
const emits = defineEmits(['close', 'confirm', 'closeChange', 'confirmChange'])  //注册事件，声明事件




const form = reactive({
  bulletin_name: shallowRef(''),
  bulletin_content: shallowRef(),
  created: getDetailedDateTime(),
});

// 父组件传过来被选择项
const props = defineProps({
  change: Array
})


watchEffect(async () => {
  if (!!props.change) {
    form.bulletin_name = props.change[0].bulletin_name
    form.bulletin_content = props.change[0].bulletin_content
    form.bulletin_id = props.change[0].bulletin_id
  }
  else {
    form.bulletin_name = '';
    form.bulletin_content = '';
  }
})
// console.log(props.change[0].userName);


// 点击确认
const onSubmit = () => {
  AddBulletin({
    bulletin_name: form.bulletin_name,
    bulletin_content: form.bulletin_content,
    created_at: form.created
  }).then(res => {
    if (res.msgType == 8000) {
      emits('confirm')
    }
    showMessage(res)

  })
}


// 点击取消，重置输入框
const cancel = () => {
  form.imageUrl = '';
  form.targetUrl = '';
}
</script>